﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Header, Menu, Footer Sample</title>
    <script src="../../Scripts/jQuery-2.0.3.min.js" type="text/javascript"></script>
    <script src="../../scripts/Subtract.js" type="text/javascript"></script>
    <style type="text/css">
        body
        {
            font-family: sans-serif;
            overflow: hidden;
        }

        div, header, footer
        {
            border: 1px solid black;
            margin: 3px;
            padding: 3px;
            overflow: auto;
        }

        header, footer
        {
            background: lightgreen;
            font-weight: bold;
        }

        header
        {
            height: 100px;
            border-bottom: 1px solid black;
            text-align: center;
        }

        #menubar
        {
            height: 19px;
            padding: 3px;
            font-size: 11px;
            line-height: 19px;
            text-align: center;
            border-bottom: 1px solid black;
        }

        footer
        {
            height: 50px;
            text-align: center;
        }

        #main
        {
            padding: 25px;
            background: white;
            z-index: 2;
        }
    </style>
</head>
<body>
    <header class="sj-fill-top sj-click-hide" data-sj-title="Header">
        <h1>Header, Menu, Footer Sample</h1>
    </header>
    <div id="menubar" class="sj-fill-top sj-click-hide" data-sj-title="Menu">
        [<a href="Home.html">Home</a>] [<a href="About.html">About Us</a>] [<a href="ContactUs.html">Contact Us</a>] [<a href="Information.html">Information</a>]
    </div>
    <div id="main" class="sj-fill">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut bibendum commodo lobortis. Suspendisse tellus nisl, blandit in augue quis, laoreet hendrerit odio. Donec eget rhoncus erat. Nulla at dignissim mauris. Donec non lectus eu nibh bibendum dictum. Morbi diam velit, placerat vitae ligula sit amet, hendrerit congue mauris. Duis ut eros quis mi eleifend mattis ac a massa. Duis dapibus enim quis nisl sollicitudin malesuada. Vivamus nec neque non elit congue facilisis in vitae dui.

Duis ut eros vehicula, iaculis lacus et, venenatis est. Ut varius ante imperdiet, dictum libero ut, interdum nunc. Quisque mollis sollicitudin dolor, sed posuere eros vestibulum non. Vestibulum eget hendrerit nisl. Nam cursus dapibus lectus, non faucibus neque vestibulum ut. Proin suscipit, odio sit amet mollis viverra, odio massa adipiscing quam, id pharetra nulla risus eget mi. Ut ut lorem lacinia, pellentesque est eu, elementum quam. Donec hendrerit a nibh a accumsan. Nunc justo risus, fringilla a est quis, vestibulum viverra massa. Nullam quis justo eget eros consequat luctus. Maecenas in nulla in elit suscipit fermentum at quis lorem. Proin pharetra magna augue, id condimentum nulla rhoncus eleifend. Aenean pretium enim nec diam facilisis eleifend. Vestibulum vitae viverra tellus, ut venenatis ligula. Etiam lobortis tristique sollicitudin.

Maecenas sed scelerisque diam, ac ullamcorper velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam convallis libero id quam aliquam sodales. Suspendisse tincidunt leo sem, in tristique sem consectetur id. Aliquam vel est sagittis, sodales nisl pharetra, tincidunt odio. Ut sodales, purus a elementum facilisis, ligula lacus dictum urna, a lacinia massa sapien a nisi. In dictum orci nec turpis pellentesque scelerisque. Phasellus dictum, velit et bibendum convallis, enim nibh bibendum risus, nec lacinia nisi ante ac lorem. Mauris quis quam lectus. Mauris blandit neque quis nisi varius, vel ultricies metus feugiat. Maecenas porttitor justo vitae posuere semper. Pellentesque sit amet iaculis lectus. Sed rutrum odio ut porta rhoncus. Praesent ut hendrerit ligula.

Donec ut faucibus urna. Integer vestibulum purus vel facilisis cursus. Nulla ut posuere lectus. Quisque id est dolor. In vitae sapien in nisi aliquet tincidunt. Proin porta, nisl nec auctor eleifend, enim nunc consequat arcu, quis varius nisi felis at lacus. Donec a condimentum nibh. Nulla tortor mauris, tincidunt eget metus at, tempor commodo enim. Sed id aliquam orci, in dictum augue. Nam tempor neque eget dapibus cursus. Proin sit amet scelerisque sem, nec accumsan nisi.

Phasellus posuere nibh eros, sit amet ullamcorper lacus rutrum id. Cras ullamcorper arcu nec vehicula vestibulum. Curabitur tortor arcu, tempus quis sagittis id, tristique id turpis. Sed erat ante, commodo quis arcu hendrerit, scelerisque consectetur nunc. Ut gravida magna in auctor consectetur. Donec tristique felis nibh, et congue dui sollicitudin quis. Morbi eros mauris, feugiat a augue ac, egestas sodales risus. Praesent ornare tempor aliquam. Curabitur turpis sem, iaculis vitae felis non, bibendum faucibus magna. In eu quam massa. Nullam accumsan enim arcu, id scelerisque metus dictum sed. Nunc scelerisque odio a augue vestibulum vehicula. Curabitur interdum quam luctus, vehicula lectus sed, tempus augue.
    </div>
    <footer class="sj-fill-bottom sj-click-hide" data-sj-title="Footer">&copy; 2013 Dr Who's On First Productions</footer>
    <script type="text/javascript">
        $("a").click(function (e) {
            alert('This is only a demo.  The link does not go anywhere.');
            e.preventDefault();
        });

        //$(".sj-fill-left").each  overlay minimizer, slide down


    </script>
</body>
</html>
